<template>
  <div class="map">
    <div id="mapWrapper"></div>
    <div class="map_info">
      <div class="map_tab">
        <div class="tab_name">
          <span class="name" :class="{active:currentIndex}" @click="ChangeTab('风景')">风景</span>
          <span class="name" :class="{active:!currentIndex}" @click="ChangeTab('交通')">交通</span>
        </div>
      </div>
      <div class="map_list">
        <ol class="ol_tab">
          <li
            class="tab_font"
            v-for="(place,index) in pois"
            :key="index"
            @mouseover="showPoi(place.id)"
          >
            <span class="place">{{place.name}}</span>
            <span>{{place.distance/1000}}公里</span>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hotelData: Array
  },
  data() {
    return {
      currentIndex: true,
      // 地图的key
      key: "7a9b0ae0c16789aebb15432209004520",
      // 地图的风景
      pois: [],
      map: {},
      markers: []
    };
  },
  async mounted() {
    // 获取周边风景
    await this.GetPlaceData();
    window.onLoad = () => {
      // 创建地图
      this.createMap();
    };

    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=092093e43b365cbafa5c434371ff9724&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },

  methods: {
    // 切换地图的tab栏
    async ChangeTab(types) {
      await this.GetPlaceData(types);
      this.setMarkers();
      this.currentIndex = !this.currentIndex;
    },
    // 创建地图
    createMap() {
      this.map = new AMap.Map("mapWrapper", {
        zoom: 15,
        center: [
          this.hotelData[0].location.longitude,
          this.hotelData[0].location.latitude
        ],
        viewMode: "3D"
      });
      // 创建完地图, 就可以遍历 pois 列表, 每个地点都创建一个 marker 放到地图上
      this.setMarkers();
    },
    // 获取周边风景
    GetPlaceData(types) {
      return this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: this.key,
          location: "113.3245904,23.1066805",
          types: types || "风景",
          offset: 10
        }
      }).then(res => {
        // console.log(res.data);
        this.pois = res.data.pois;
        console.log(this.pois);
      });
    },
    // 创建点标记
    setMarkers() {
      this.markers = this.pois.map(value => {
        var marker = new AMap.Marker({
          position: value.location.split(","),
          title: value.name,
          extData: value.id
        });
        marker.on("mouseover", () => {
          return this.showPoi(value.id);
        });
        return marker;
      });
      // 将整个地图的覆盖物清理掉
      this.map.clearMap();
      this.map.add(this.markers);
      // 添加完点标记, 将地图的视图设为合适的大小
      this.map.setFitView();
    },
    // 居中显示每个地点标记
    showPoi(poiId) {
      this.markers.forEach(marker => {
        if (marker.getExtData() == poiId) {
          marker.setTop(true);
          const infoWindow = new AMap.InfoWindow({
            content: `<span style="font-size: 12px;color: #333">${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32)
          });
          infoWindow.open(this.map, marker.getPosition());
          this.map.setCenter(marker.getPosition());
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.map {
  margin-bottom: 60px;
  display: flex;
  #mapWrapper {
    width: 650px;
    height: 354px;
  }
}
.map_info {
  margin-left: 20px;
  width: 330px;
  height: 360px;
  .map_tab {
    height: 40px;
    padding: 0;
    overflow: hidden;

    .tab_name {
      position: relative;
      font-size: 14px;
      padding-bottom: 10px;
      padding-right: 20px;
      border-bottom: 2px solid #e4e7ed;

      .name {
        margin-right: 20px;
        padding-bottom: 10px;
        &.active {
          color: #409eff;
          border-bottom: 2px solid #409eff;
          z-index: 100;
        }
      }

      .name:hover {
        cursor: pointer;
        color: #409eff;
      }
    }
  }
  .map_list {
    height: 300px;
    overflow-y: scroll;
    font-size: 14px;
    color: #666;
    .ol_tab {
      width: 313px;
      height: 370px;
      .tab_font {
        display: flex;
        margin: 0 20px 20px 10px;
        .place {
          flex: 1;
          cursor: pointer;
        }
      }
    }
  }
}
</style>